import React from 'react'
import { Link } from 'react-router-dom'
import { JumboTabs, Empty } from 'antd-mobile'

import { imgPre } from '../../../../request/http';

import addcart from '../../../../assets/img/addcart.png'
import './groupon.less';

export default function groupon(props) {
    // 1.取数据
    let { groupon, timeArr } = props;
    return (
        <div className='groupon'>
            <div className='title'>
                <p>万人团</p>
                {/* 2.页面倒计时 */}
                <span>
                    <i>{timeArr.h}</i>:<i>{timeArr.m}</i>:<i>{timeArr.s}</i>
                </span>
            </div>

            {/*3. 商品展示 */}
            <div className='wrap'>
                <JumboTabs>
                    {groupon.length > 0 ? <>
                        {groupon.map(item => {
                            return <JumboTabs.Tab key={item.id} title={
                                <Link to={"/detail/" + item.id + "/2"}>
                                    <div className='con'>
                                        <img src={imgPre + item.img} alt="" />
                                        <div className='foot'>
                                            <div className='left'>
                                                <p>￥{item.price}</p>
                                                <span><img src={addcart} alt="" /></span>
                                            </div>
                                            <div className='right'>
                                                <>{item.goodsname}</>
                                            </div>
                                        </div>
                                    </div>
                                </Link>
                            } />
                        })}
                    </> : <Empty description='暂无数据' />}
                </JumboTabs>
            </div>
        </div>
    )
}
